<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue基础</title>
</head>
<body>

<div id="app">
    {{ message }}
    <h2>
        {{ school.name }}
    </h2>
    <h1 v-text="message+'!'"></h1>

    {{ campu[0] }}
    <h1 v-html="soonn"></h1>
    <input type="button" value="v-on指令" v-on:click="dos">
    <input type="button" value="@指令" @click="dos">
    <input type="button" value="双击指令" @dblclick="dos">

    <h3 @click="changes">{{ message }}</h3>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

    var app=new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!",
            school:{
                name:"enne",
                age:"12"
            },
            campu:["北京","上海","日本"],
            soonn:"<a href='#'>可以</a>"
        },
        methods:{
            dos:function () {
                    alert("it")
            },
            changes:function () {
                this.message+="怕打"
            }
        }
    })

</script>
</body>
</html>